<template>
  <div>
    <div class="city-container">
      <div>
        <header>
          <div class="icons">
            <i class="iconfont icon-nv"></i>
          </div>
          <div class="form" @click="gotoPopup">
            <input type="text" class="search" disabled placeholder="赘婿出山" />
            <i class="iconfont icon-sousuo"></i>
          </div>
        </header>
        <cityNav @changeLoading="changeLoading"></cityNav>
        <keep-alive>
          <Loading v-if="isLoading" />
          <router-view v-else />
        </keep-alive>
      </div>
      <div class="footer">
        <compTabbar></compTabbar>
      </div>
    </div>
    <keep-alive>
      <transition
        v-if="$route.path == '/bookcity/popup'"
        leave-active-class="animate__animated animate__slideOutRight"
      >
        <router-view></router-view>
      </transition>
    </keep-alive>
  </div>
</template>

<script>
import compTabbar from "@/components/compTabbar";
import cityNav from "@/components/cityNav";

export default {
  components: {
    compTabbar,
    cityNav,
  },
  data() {
    return {
      isLoading: true,
      finished: true,
      refreshing: true,
    };
  },
  methods: {
    //前往弹出层
    gotoPopup() {
      this.$router.push("/bookcity/popup");
    },
    changeLoading(bool) {
      this.isLoading = bool;
    },
    onRefresh() {
      setTimeout(() => {
        this.refreshing = false;
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
// .slide-enter,
.slide-leave-to {
  right: -100%;
}
.slide-enter-active,
.slide-leave-active {
  transition: right 0.3s linear;
}
// .slide-enter-to,
.slide-leave {
  right: 0;
}
.city-container {
  height: 100vh;
}
.van-list {
  height: 100%;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 45px;
  padding: 10px 14px 0;
  box-sizing: border-box;
  .icons {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    margin-right: 20px;
    box-shadow: -8px 6px 4px #f8f8f8, -10px -6px 4px #fafafa;
    .iconfont {
      font-size: 24px;
      color: #ff0000;
    }
  }
  .form {
    position: relative;
    flex: 1;
    height: 90%;
    border-radius: 30px;
    box-shadow: 10px 5px 10px #efefef;
    .search {
      width: 100%;
      height: 100%;
      border-radius: 30px;
      padding-left: 10px;
      background-color: #ffffff;
      box-sizing: border-box;
      border: 1px solid #f8f8f8;
    }
    .icon-sousuo {
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
      font-size: 24px;
      color: #666;
    }
  }
}

.content {
  width: 100%;
  // background-color: #eee;
}
</style>